<html>
  <head>
    <title>Image Captioning Demo</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <style>
    body {
      text-align: center;
      font-family: Helvetica;
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .item {
      position: relative;
      margin: 10px;
      background: #F5F5F5;
      padding: 20px;
    }

    .remove {
      position: absolute;
      right: 10;
      top: 10;
      opacity: 0.5;
    }

    textarea {
      width: 100%;
      margin: 2px 0px;
      height: 310px;
      font-family: Arial;
      border: none;
      background: whitesmoke;
    }

    #results {
      position: relative;
      margin: 50px;
    }
    /*#dropper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #dropper.hover {
      opacity: 0.5;
      background: lightblue;
      z-index: 100;
    }*/
    #upload {
      position: relative;
      margin: 50px;
    }
    </style>
  </head>
  <body>
  </br>
    <h2>Musio Image Capationing Demo</h2>
    <!-- <h4>Drop Image Files here</h4> -->
    <!-- <div id="dropper"></div> -->
    <div id="results"></div>
    <div id="upload"</div>
    </br>

    <script>
    if (typeof window.FileReader === 'undefined')
      alert('File API & FileReader not supported');

    var dropper = document.getElementById("dropper");
    var results = document.getElementById("results");
    var upload = document.getElementById("upload");
    var uploader = document.createElement("INPUT");

    uploader.setAttribute("type",'file')
    upload.appendChild(uploader)
    uploader.onchange =function(e){
      console.log(this.files)
      e.preventDefault();
      var files = [].slice.call(this.files);
      files.forEach(function (file) {
        var reader = new FileReader();
        reader.onload = function(event) {
          fileLoaded(file.name, event.target.result);
        };
        reader.readAsDataURL(file);
        dropper.className = '';
      });
      return false;
    };


    // dropper.ondragover = function () { dropper.className = 'hover'; return false; };
    // dropper.ondragend = function () { dropper.className = ''; return false; };
    // dropper.ondrop = function (e) {
    //   e.preventDefault();
    //   var files = [].slice.call(e.dataTransfer.files);
    //   files.forEach(function (file) {
    //     var reader = new FileReader();
    //     reader.onload = function(event) {
    //       fileLoaded(file.name, event.target.result);
    //     };
    //     reader.readAsDataURL(file);
    //     dropper.className = '';
    //   });
    //   return false;
    // };

    function annotate(dataUri,cb) {
      var request = new XMLHttpRequest();
      var annotations
      request.open('POST', 'http://localhost:5000/', true);
      // request.open('POST', 'http://im2txt.themusio.com/', true);
      request.setRequestHeader('Content-Type', 'application/upload');
      request.onload = function(e) {
        // Once we have the response, render it and loop.
        annotations = JSON.parse(request.responseText);
        cb(annotations)
      }
      request.send(dataUri)
    }

    function fileLoaded(filename, dataUri) {
      var div = document.createElement("div");
      div.className = 'item';

      var remove = document.createElement("button");
      remove.className = 'remove';
      remove.innerHTML = 'x';
      remove.onclick = function() {
        if(localStorage) localStorage.removeItem("b64-"+filename);
        results.removeChild(div);
      };
      div.appendChild(remove);

      var name = document.createElement("div");
      name.innerHTML = filename;
      div.appendChild(name);

      if(/^data:image/.test(dataUri)) {
        var imgDiv = document.createElement("div");
        var img = document.createElement("img");
        img.src = dataUri;
        img.style['max-width'] = '300px';
        img.style['height-width'] = '500px';
        imgDiv.appendChild(img);
        div.appendChild(imgDiv);
      }



      var ann = document.createElement("textarea");
      // ta.onclick = function() {
      //   ta.select();
      // };
      // ta.value = dataUri;
      annotate(dataUri,function(responseText){
        // console.log(responseText)
        try {
          //ann.value = responseText.captions.slice(0,20).join('\n')

          ann.value =
          "QUESTION:\n\n" + responseText['question'].join('\n') +
          "\n\nLONG:\n\n" + responseText['long'].join('\n') +
          "\n\nSHORT:\n\n" + responseText['short'].slice(0,10).join('\n')
        }
        catch(err){
          console.log(err)
          ann.value = "You must upload an image file."
        }
      });
      div.appendChild(ann);
      // console.log(dataUri);

      results.appendChild(div);
      if(localStorage) localStorage.setItem("b64-"+filename, dataUri);
    }

    if(localStorage)
      for(var filename in localStorage)
        if(filename.indexOf("b64-") === 0)
          fileLoaded(filename.replace("b64-",""), localStorage.getItem(filename));
    </script>
  </body>
</html>
